<template>
<div class="main">
    <div class="top">
      <div class="fnt">{{date}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前位置为：
        <a-select v-model="gate" default-value="空" style="width: 120px;background-color:red" @change="handleChange">
          <a-select-option v-for="item in gate" :value="item.id" :key="item.id"> {{item.name}}</a-select-option>
        </a-select>
    </div>
    </div>
  <div class="page">
    <div class="leftBox">
      <div class="title" >
        <div style="width:30%;"></div>
       <div style="width:20px;"><img src="/@/assets/images/guard/le.png"/></div>&nbsp;&nbsp;请假信息
        <div style="width:20%;"></div>
          <div class="button" style="width:20%;cursor:pointer" @click="getMoreLeave"><img src="/@/assets/images/guard/bt.png"/></div>
      </div>
      <div>
        <div style="height: 37vh;">
      <div class="list" style="border: 1px solid black;" id="leavelistid">
        <div v-for="(item,index) in leaves" :key="index">
          <div class="item">
            <div class="img"><img :src="baseApiUrl+'/'+VITE_GLOB_BUCKET_NAME+'/'+item.photo" v-if="item.photo"/></div>
            <div class="content">
              <div class="row">
                <div class="label">姓名:</div>
                <div class="value">{{item.name}}</div>
              </div>
              <div class="row">
                <div class="label">学号:</div>
                <div class="value">{{item.code}}</div>
              </div>
              <div class="row">
                <div class="label">班级:</div>
                <div class="value">{{item.departmentId}}</div>
              </div>
              <div class="row">
                <div class="label">请假:</div>
                <div class="value">{{item.sdate}} 至 {{item.edate}}</div>
              </div>
              <div class="row">
                <div class="label">是否离校:</div>
                <div class="value">{{item.isPass==0?'否':'是'}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
          <div style="height:43vh;width:100%;background-color:#011F27">
            <div style="height:15%;padding-top:10px;padding-left:20px;"><span style="font-size: 20px;">请假人数统计</span></div>
            <div style="display:flex;width:100%;height:85%">
              <div style="width:70%;">
                <div style="height: 10%"></div>
                <div  class="sum" style="margin:0 auto;padding-top:30px;width:260px;height:260px;">
                  <div style="margin: 0 auto;padding-top:70px;padding-left: 101px; font-size:20px;">
                    <div>总人数</div>
                    <div style="color:#00feff">{{personNum}}人</div>
                  </div>
                </div>
                <div style="height: 10%"></div>
              </div>
              <div style=";font-size:20px;">
                <div style="height: 20%;"></div>
                <div style="padding-bottom:0px;">在校人数</div>
                <div style="color:#00feff">{{personNum-notleaveNum}}</div>
                <div style="">请假未离校人数</div>
                <div style="color:#00feff">{{leaveNum}}</div>
                <div style="">请假已离校人数</div>
                <div style="color:#00feff">{{notleaveNum}}</div>
              </div>
            </div>
          
          </div>
        </div>
      </div>
    </div>
    <div class="rightBox">

      <div class="twoContent contentBox">
        <div class="title">
          <div style="width:30%;"></div>
          <div style="width:20px;"><img src="/@/assets/images/guard/le.png"/></div>&nbsp;&nbsp;今日预约访客
          <div style="width:15%;"></div>
            <div class="button" style="width:20%;cursor:pointer" @click="getMoreAp"><img src="/@/assets/images/guard/bt.png"/></div>
        </div>
        <div class="list" id="aplistid">
          <div v-for="(item,index) in aplist" :key="index">
            <div class="item">
              <!--<div class="img"><img :src="baseApiUrl+'/'+VITE_GLOB_BUCKET_NAME+'/'+item.snapLink" v-if="item.snapLink"/></div>-->
              <div class="content">
                <div class="row">
                  <div class="label">姓名:</div>
                  <div class="value">{{item.wbname}}</div>
                </div>
                <div class="row">
                  <div class="label">证件号:</div>
                  <div class="value">{{item.wbpaperNumber}}</div>
                </div>
                <div class="row">
                  <div class="label">受访人:</div>
                  <div class="value">{{item.meetPersonId_dictText}}</div>
                </div>
                <div class="row">
                  <div class="label">预约时间:</div>
                  <div class="value">{{item.willVisitTime}}</div>
                </div>
                <div class="row">
                  <div class="label">来访事由:</div>
                  <div class="value">{{item.visitDescription}}</div>
                </div>
                  <div class="row">
                     <div class="label">实际来访时间:</div>
                      <div class="value">{{item.recordTime?item.recordTime:"未到访"}}</div>
                  </div>
              </div>

            </div>
          </div>
        </div>
      </div>
      <div class="threeContent contentBox">
        <div class="title">
          <div style="width:30%;"></div>
          <div style="width:20px;"><img src="/@/assets/images/guard/le.png"/></div>&nbsp;&nbsp;今日临时访客
          <div style="width:15%;"></div>

            <div class="button" style="width:20%;cursor:pointer" @click="getMoreAp2"><img src="/@/assets/images/guard/bt.png"/></div>
        </div>
        <div class="list" id="ap2listid">
          <div v-for="(item,index) in aplist2" :key="index">
            <div class="item">
              <!--<div class="img"><img :src="baseApiUrl+'/'+VITE_GLOB_BUCKET_NAME+'/'+item.snapLink" v-if="item.snapLink"/></div>-->
              <div class="content">
                <div class="row">
                  <div class="label">姓名:</div>
                  <div class="value">{{item.wbname}}</div>
                </div>
                <div class="row">
                  <div class="label">证件号:</div>
                  <div class="value">{{item.wbpaperNumber}}</div>
                </div>
                <div class="row">
                  <div class="label">受访人:</div>
                  <div class="value">{{item.meetPersonId_dictText}}</div>
                </div>
                <div class="row">
                  <div class="label">预约时间:</div>
                  <div class="value">{{item.willVisitTime}}</div>
                </div>
                <div class="row">
                  <div class="label">来访事由:</div>
                  <div class="value">{{item.visitDescription}}</div>
                </div>
                              <div class="row">
                                <div class="label">实际来访时间:</div>
                                <div class="value">{{item.recordTime?item.recordTime:"未到访"}}</div>
                              </div>
              </div>

            </div>
          </div>
        </div>
      </div>


      <div class="oneContent contentBox">
        <div class="title">
          <div style="width:35%;"></div>
          <div style="width:20px;"><img src="/@/assets/images/guard/le.png"/></div>&nbsp;&nbsp;通行记录
          <div style="width:40%;"></div>

            <div class="button" style="width:10%;cursor:pointer" @click="getMoreLeavePass"><img src="/@/assets/images/guard/bt.png"/></div>
        </div>
        <div class="list" id="listacid" >
          <div v-for="(item,index) in aclist" :key="index">
            <div class="item">
              <div class="img"><img :src="baseApiUrl+'/'+VITE_GLOB_BUCKET_NAME+'/'+item.item1.snapLink" v-if="item.item1.snapLink"/></div>
              <div class="content">
                <div class="row">
                  <div class="label">姓名:</div>
                  <div class="value">{{item.item1.personName}}</div>
                  <!--<span>住宿生</span>-->
                </div>
                <div class="row">
                  <div class="label">学号:</div>
                  <div class="value">{{item.item1.personCode}}</div>
                </div>
                <div class="row">
                  <div class="label">班级:</div>
                  <div class="value">{{item.item1.departName}}</div>
                </div>
                <div class="row">
                  <div class="label">通行时间:</div>
                  <div class="value">{{item.item1.accessDate}}</div>
                </div>
                <div class="row">
                  <div class="label">通行方式:</div>
                  <div class="value">{{item.item1.accessMethod_dictText}}</div>
                </div>
<!--                <div class="row">
                  <div class="label">请假:</div>
                  <div class="value">{{item.sdate}} 至 {{item.edate}}</div>
                </div>-->
              </div>
              <div class="img" v-if="item.item2"><img :src="baseApiUrl+'/'+VITE_GLOB_BUCKET_NAME+'/'+item.item2.snapLink" v-if="item.item2.snapLink"/></div>
              <div class="content"  v-if="item.item2">
                <div class="row">
                  <div class="label">姓名:</div>
                  <div class="value">{{item.item2.personName}}</div>
                  <!--<span>住宿生</span>-->
                </div>
                <div class="row">
                  <div class="label">学号:</div>
                  <div class="value">{{item.item2.personCode}}</div>
                </div>
                <div class="row">
                  <div class="label">班级:</div>
                  <div class="value">{{item.item2.departName}}</div>
                </div>
                <div class="row">
                  <div class="label">通行时间:</div>
                  <div class="value">{{item.item2.accessDate}}</div>
                </div>
                <div class="row">
                  <div class="label">通行方式:</div>
                  <div class="value">{{item.item2.accessMethod_dictText}}</div>
                </div>
                <!--                <div class="row">
                                  <div class="label">请假:</div>
                                  <div class="value">{{item.sdate}} 至 {{item.edate}}</div>
                                </div>-->
              </div>
            </div>
          </div>
          <div v-for="(item,index) in aclist" :key="index">
            <div class="item">
              <div class="img"><img :src="baseApiUrl+'/'+VITE_GLOB_BUCKET_NAME+'/'+item.item1.snapLink" v-if="item.item1.snapLink"/></div>
              <div class="content">
                <div class="row">
                  <div class="label">姓名:</div>
                  <div class="value">{{item.item1.personName}}</div>
                  <!--<span>住宿生</span>-->
                </div>
                <div class="row">
                  <div class="label">学号:</div>
                  <div class="value">{{item.item1.personCode}}</div>
                </div>
                <div class="row">
                  <div class="label">班级:</div>
                  <div class="value">{{item.item1.departName}}</div>
                </div>
                <div class="row">
                  <div class="label">通行时间:</div>
                  <div class="value">{{item.item1.accessDate}}</div>
                </div>
                <div class="row">
                  <div class="label">通行方式:</div>
                  <div class="value">{{item.item1.accessMethod_dictText}}</div>
                </div>
                <!--                <div class="row">
                                  <div class="label">请假:</div>
                                  <div class="value">{{item.sdate}} 至 {{item.edate}}</div>
                                </div>-->
              </div>
              <div class="img" v-if="item.item2"><img :src="baseApiUrl+'/'+VITE_GLOB_BUCKET_NAME+'/'+item.item2.snapLink" v-if="item.item2.snapLink"/></div>
              <div class="content"  v-if="item.item2">
                <div class="row">
                  <div class="label">姓名:</div>
                  <div class="value">{{item.item2.personName}}</div>
                  <!--<span>住宿生</span>-->
                </div>
                <div class="row">
                  <div class="label">学号:</div>
                  <div class="value">{{item.item2.personCode}}</div>
                </div>
                <div class="row">
                  <div class="label">班级:</div>
                  <div class="value">{{item.item2.departName}}</div>
                </div>
                <div class="row">
                  <div class="label">通行时间:</div>
                  <div class="value">{{item.item2.accessDate}}</div>
                </div>
                <div class="row">
                  <div class="label">通行方式:</div>
                  <div class="value">{{item.item2.accessMethod_dictText}}</div>
                </div>
                <!--                <div class="row">
                                  <div class="label">请假:</div>
                                  <div class="value">{{item.sdate}} 至 {{item.edate}}</div>
                                </div>-->
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    </div>
    <PassModal @register="registerModal" @success="handleSuccess"></PassModal>
    <PassModalLeave @register="registerModalleave" @success="handleSuccess"></PassModalLeave>

  </div>
</template>

<script lang="ts" name="offlineSum" setup>
  import {ref, reactive, computed, unref, onUnmounted, onBeforeUnmount} from 'vue';
  import {BasicTable, useTable, TableAction} from '/@/components/Table';
  import {useModal} from '/@/components/Modal';
  import { useListPage } from '/@/hooks/system/useListPage'
  import {columns, searchFormSchema, superQuerySchema} from './gateSentry.data';
  import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './gateSentry.api';
  import {list as listgate} from "/@/views/channel/acdoor/AcDoor.api";

  import PassModal from './components/PassModal.vue';
  import PassModalLeave from './components/PassModalLeave.vue';

  import {listBase as listLeaves} from "/@/views/attendance/attaskforleave/AttAskforleave.api";
  import {list as listLeaves1}  from "/@/views/channel/actemporarygeneral/AcTemporaryGeneral.api"
  import {listac} from "/@/views/channel/acaccessrecord/AcAccessRecord.api";
  import {listTodayRecord,list as listap} from  "/@/views/visitor/appointment/SsVisitAppointment.api";
  import {countPerson} from "/@/views/baseinfo/person/SsPerson.api";
  import {countLeave} from "/@/views/attendance/attaskforleave/AttAskforleave.api";
  import {getAppEnvConfig} from "@/utils/env";
  import { downloadFile } from '/@/utils/common/renderUtils';
  import { useUserStore } from '/@/store/modules/user';
  import {onMountedOrActivated} from "@/hooks/core/onMountedOrActivated";
  import {useGlobSetting} from "@/hooks/setting";
  import {useRouter} from 'vue-router';
  import {store} from "@/store";
  import dayjs from 'dayjs';
  import {useMessage} from "@/hooks/web/useMessage";
  const queryParam = reactive<any>({});
  const checkedKeys = ref<Array<string | number>>([]);
  const userStore = useUserStore();
  const router = useRouter();
  let activeKey = ref('1')
  //注册model
  const [registerModal, {openModal}] = useModal();
  const { createMessage } = useMessage();
  const [registerModalleave, {openModal:openModalleave}] = useModal();

  const globSetting = useGlobSetting();
  const baseApiUrl = globSetting.domainUrl;
  const {VITE_GLOB_BUCKET_NAME} = getAppEnvConfig();
  const leaves = reactive([]);
  const aclist = reactive([]);
  const aplist = reactive([]);
  const aplist2 = reactive([]);
  const gate = reactive([]);
  const timer = ref();
  const gateid = ref();

  function handleChange(e){
    console.log(e)
    gateid.value = e;
    aclist.splice(0, aclist.length);
    getAccessRecord();
    try{
      initWebSocketGate(e);
    }catch(error){
      console.log(error)
    }
  }
 function handleSuccess(){

 }
  onUnmounted(()=>{
   websocketclose({});
  })
  onBeforeUnmount(()=>{
    if(timer.value) {
     clearInterval(timer.value);
      }
  })

  const date = ref();
  onMountedOrActivated( ()=>{

    timer.value = setInterval(function() {date.value = dayjs().format('YYYY-MM-DD HH:mm:ss');}, 1000);
    setInterval(function () {
      updateData();
    },30*1000);
    update();
    let ac = document.getElementById("listacid");
    let apd = document.getElementById("aplistid");
    let ap2d = document.getElementById("ap2listid");
    let led = document.getElementById("leavelistid");
    setInterval(function(){
      if(led.scrollTop>0) {
        //console.log(led.scrollTop);
        //console.log(led.scrollHeight);
      }
      if(ac.scrollTop+340>=ac.scrollHeight){
        ac.scrollTop = 0;
      }else{
        ac.scrollTop = ac.scrollTop+1;
      }
      if(apd.scrollTop+340>=apd.scrollHeight){
        apd.scrollTop = 0;
      }else{
        apd.scrollTop = apd.scrollTop+1;
      }
      if(ap2d.scrollTop+340>=ap2d.scrollHeight){
        ap2d.scrollTop = 0;
      }else{
        ap2d.scrollTop = ap2d.scrollTop+1;
      }
      if(led.scrollTop+350>=led.scrollHeight){
        led.scrollTop = 0;
      }else{
        led.scrollTop = led.scrollTop+1;
      }
    },60);


  });

  const personNum = ref();
  const leaveNum = ref();
  const notleaveNum = ref();
  const update = () =>{

    try{
      initWebSocket({});
    }catch(error){
      console.log(error)
    }
    updateData();
  }

  function updateData(){

    let gres = listgate({});
    gres.then((res)=>{
      console.log(res)
      if(res?.records){
        gate.splice(0,gate.length);
        res.records.forEach((item)=>{
          gate.push(item);
        })
      }
    });

    let nmres = countPerson({});
    let lenmres = countLeave({});

    nmres.then((data)=>{
      console.log(data);
      personNum.value = data;
    })
    lenmres.then((data)=>{
      console.log(data);
      leaveNum.value = data.leave;
      notleaveNum.value= data.notleave;
    })



    if(leaves.length>=20) {
      leaves.splice(0, 10);
    }
    let sdatebegin = dayjs().format('YYYY-MM-DD HH:mm:ss');
    //let sdateend = dayjs().add(1,"day");
    let sdateend1 =  dayjs().format('YYYY-MM-DD');
    console.log(sdatebegin)
    // console.log(sdateend1)
    //获取当天数据
    let p1 =  listLeaves({column:"sdate",status:1,order:"desc",pageSize:10});
    p1.then((res)=>{
      console.log(res)
      if(res?.records){
        res.records.forEach((item)=>{
          leaves.push(item);
        })
      }
    });

    console.log(leaves);
    getAccessRecord();
    if(aplist.length>=20)
    aplist.splice(0,10);
    //最近十条
    let p3 = listTodayRecord({pageSize:10,source:1,column:"willVisitTime",order:"desc",allow:1});//,willVisitTime_begin:sdateend1,willVisitTime_end:sdateend1});
    console.log(p3)
    p3.then(data=>{
      console.log(data)
      if(data?.records){
        data.records.forEach(item=>{
          aplist.push(item);
        })
      }
    })
    if(aplist2.length>=20)
    aplist2.splice(0,10);
    let p31 = listTodayRecord({pageSize:10,source:2,column:"willVisitTime",order:"asc",allow:1});//,willVisitTime_begin:sdateend1,willVisitTime_end:sdateend1});
    p31.then(data=>{
      console.log(data)
      if(data?.records){
        data.records.forEach(item=>{
          aplist2.push(item);
        })
      }
    })



    console.log(aclist)
  }

  function getAccessRecord(){
    if(aclist.length>=20) {
      aclist.splice(0, 10);
    }
    let p2 =  listac({pageSize:10,gateid:gateid.value});
    p2.then((res1)=>{
      console.log(res1)
      if(res1?.records){

        for(let i = 0;i<res1.records.length/2;i++){
          let tmp = {item1:{},item2:{}};
          let item = res1.records[i*2];
          tmp.item1 = item;
          if(i*2+1<=res1.records.length-1) {
            let item1 = res1.records[i * 2 + 1];
            tmp.item2 = item1;
          }
          aclist.push(tmp);
        }

      }
    });
  }

  function getMoreLeave(){
    router.push({path:"/attaskforleave/attAskforleaveListAudit"})
  }
  function getMoreAp(){
    router.push({path:"/visitor/ssVisitAppointmentList"})
  }
  function getMoreAp2(){
    router.push({path:"/visitor/ssVisitAppointmentList"})
  }

  function  getMoreLeavePass() {
    router.push({path:"/actemporarygeneral/acTemporaryGeneralList"});
  }

  const websock = reactive({sock:{},sock1:{}});
  const  initWebSocket= (e) => {
    // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
    var userId = userStore.getUserInfo.id;
    var url =baseApiUrl.replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
    console.log(url)
    websock.sock = new WebSocket(url);
    websock.sock.onopen = websocketonopen;
    websock.sock.onerror = websocketonerror;
    websock.sock.onmessage = websocketonmessage;
    websock.sock.onclose = websocketclose;
  };
  const initWebSocketGate = (e) =>{
    var userId = userStore.getUserInfo.id;
    var url =baseApiUrl.replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId+e;
    console.log(url)
    websock.sock1 = new WebSocket(url);
    websock.sock1.onopen = websocketonopen;
    websock.sock1.onerror = websocketonerror;
    websock.sock1.onmessage = websocketonmessage;
    websock.sock1.onclose = websocketclose;
  }
  const websocketonopen = (e) => {
    console.log("WebSocket连接成功");
  };
  const websocketonerror= (e) =>{
    console.log("WebSocket连接发生错误");
  };
  const websocketonmessage= (e) => {
    console.log(e)
    var data = eval("(" + e.data + ")");
    //处理订阅信息
    if(data.cmd == "topic"){
      //TODO 系统通知

    }else if(data.cmd == "user"){
      //TODO 用户消息

    }else if(data.cmd == "refresh"){
      //TODO 用户消息
      console.log("refresh");
      update();
    }else if(data.cmd?.substring(0,4) =="pass"){
      console.log("pass")
      let tt = data.cmd.substring(4,data.cmd.length);
      console.log(tt);
      let str =tt.split("!@#");
      if(str.length!=5)
        return;

      if(str[0]=="null"){
        createMessage.warn("访客信息不存在");
        return;
      }

      let promise =  listap({id:str[0]});
      promise.then((data)=>{
        console.log(data)
        if(data?.records?.length==0) {
          createMessage.warn("访客信息不存在");
          return;
        }
        openModal(true, {
          record:data.records[0],
          isUpdate: true,
          showFooter: true,
          update: update,
          deviceId:str[1],
          deviceName:str[2],
          channelId:str[3],
          channelName:str[4],
        });
      })
    }else if(data.cmd?.substring(0,4) =="leav"){
      console.log("leav")
      let tt = data.cmd.substring(4,data.cmd.length);
      console.log(tt);
      let str =tt.split("!@#");
      if(str.length!=5)
        return;
      console.log(str[0]);
      console.log(str[1]);
      let promise =  listLeaves1({sourceId:str[0]});
      promise.then((data)=>{
        console.log(data)
        if(data?.records?.length==0)
          return;
        openModalleave(true, {
          record:data.records[0],
          isUpdate: true,
          showFooter: true,
          update: update,
          deviceId:str[1],
          deviceName:str[2],
          //channelId:str[3],
          gateName:str[4],
        });
      })
    }
  };
  const refreshData = (e) =>{

  }
  const websocketclose = (e) => {
    console.log("connection closed (" + e.code + ")");
  };

</script>

<style lang="less" scoped>
  .title{
    //color: #000;
    font-size: 24px;
    position: relative;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:url(/@/assets/images/guard/title.png);
    background-size:cover;
    //border-bottom: 1px solid #e5e7eb;
    .btn{
      position: absolute;
      right: 20px;
    }

  }
  .item{
    padding: 10px;
    display: flex;
    //border-bottom: 1px solid #e5e7eb;
    .img{
      width: 150px;
      background: #eee;
      margin-right: 20px;
    }
    .content{
      flex: 1;
      .row{
        display: flex;
        .label{
          margin-right: 20px;
        }
        .value{
          flex: 1;
        }
      }
    }
  }
  .button{
   // background-color: #9effff;
  }
  .sum{
    background-image: url(/@/assets/images/guard/yu.png);
    background-size: cover;
  }
  .top{
    width:100%;
    height:40px;
   // background-color: #2b3b4e;

    .fnt{
      color:#fff;
      margin: 0px auto;
      padding-top:12px;
      width:500px;
      font-size:20px;
    }
  }
 .main{
  // padding-top:20px;
   height: 100%;
   width:100%;
   color:#fff;
   background-image: url(/@/assets/images/guard/bg.png);
   background-size: cover;
 }
  .page{
    display: flex;
    //background-color: #2b3b4e;



    .leftBox{
      flex: 1;
      //border: 1px solid #e5e7eb;
      margin: 8px;

      //background: #0a8fe9;
      .list{
       // height: calc( 100vh - 190px );
        background-color:#011F27;
        color:#fff;
        height:100%;
        overflow-y:hidden;
      //  background-image:url(/@/assets/images/guard/ctbg.png);
      }
      .list1{
        // height: calc( 100vh - 190px );

        color:#fff;
        overflow: auto;
      //  background-image:url(/@/assets/images/guard/ctbg.png);
      }
    }
    .rightBox{

      flex: 2;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 8px 8px 8px 0;
      .oneContent{
        width: 100% !important;
       // background-color: #00d973;
        margin-bottom: 10px;
        height: 390px;

      }
      .twoContent{
        margin-bottom: 10px;
        height: 390px;
        border-right: 1px solid #e5e7eb;
     //   background-image:url(/@/assets/images/guard/ctbg.png);
      //  background-color: #00feff;
      }
      .threeContent{
        margin-bottom: 10px;
        height: 390px;
        border-right: 1px solid #e5e7eb;
      //  background-image:url(/@/assets/images/guard/ctbg.png);
     //   background-color: #00feff;
      }
      .contentBox{
        width: 49.5%;
       // background-image:url(/@/assets/images/guard/ctbg.png);
        height: 390px;
        //border: 1px solid #e5e7eb;
        .list{
          height: 340px;
          background-color:#011F27;
          overflow-y:hidden;
        }
      }
    }
  }

</style>
